<template>
  <div class="evaluate">
    <div class="table" v-loading="loading">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{
          color: '#333333',
          backgroundColor: '#f3f3f3',
        }"
      >
        <el-table-column prop="" label="买家信息" width="300">
          <template slot-scope="scope">
            <div class="buyer">
              <div class="left"></div>
              <div class="right">
                <div class="title">昵称昵称</div>
                <div class="phone">17683988549</div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="" label="评价内容">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" @click.prevent="examineHit(scope.row)">
                查看评价
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="商品信息">
          <template slot-scope="scope">
            <div class="message">
              <div class="list">商品名称：琉璃白小众设计感仿丝感……</div>
              <div class="list">规格：M码-米白色</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="评价时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" @click.prevent="deleteHit(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="tableDataTotal"
          :current-page="page"
        >
        </el-pagination>
      </div>
    </div>

    <!--提示弹出框-->
    <div class="appraise">
      <el-dialog
        title=""
        :visible.sync="evaluateVisible"
        :before-close="evaluateClose"
        width="30%"
      >
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="评价内容" class="form-item">
            评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容
            评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容
          </el-form-item>
          <el-form-item label="评价图片" class="form-item">
            <img v-for="(item, index) in 10" :key="index" src="" alt="" />
          </el-form-item>

          <el-form-item label="" class="form-attachment">
            <div class="list" @click="evaluateClose">关闭</div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <!--删除弹出框-->
    <div class="delete">
      <el-dialog
        title="删除"
        :visible.sync="deleteVisible"
        :before-close="deleteClose"
      >
        <div class="delete-title">是否确认删除？</div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">取消</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      limit: 10,
      tableData: [
        {
          createtime: "2025-07-17 18:41:23",
        },
        {
          createtime: "2025-07-17 18:41:23",
        },
        {
          createtime: "2025-07-17 18:41:23",
        },
      ],
      tableDataTotal: 0,
      loading: false,
      commonObj: {},
      //--------------------------------------
      evaluateVisible: false,
      ruleForm: {
        name: "",
        image: [],
      },
      //------------
      deleteVisible: false,
    };
  },
  methods: {
    //------------------------
    examineHit(item) {
      this.commonObj = item;
      this.evaluateVisible = true;
    },
    evaluateClose() {
      this.evaluateVisible = false;
    },
    evaluateConfirm() {},
    //-----------------------
    deleteHit(item) {
      this.commonObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      //   let params = this.commonObj.bannerId;
      //   commonAdvertisingListDelete(params).then((res) => {
      //     if (res.errorCode == null) {
      //       this.deleteVisible = false;
      //       this.$message.success("删除成功！");
      //       this.loading = true;
      //       this.commonAdvertisingListMet();
      //     }
      //   });
    },
    //---------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      //   this.saveCommodityListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      //   this.saveCommodityListMet();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");
@import url("@/assets/css/delete.less");

.evaluate {
  .table {
    .buyer {
      display: flex;
      align-items: center;
      .left {
        width: 50px;
        height: 50px;
        border: 1px solid;
        margin-right: 10px;
        border-radius: 50%;
      }

      .right {
        .title {
        }
        .phone {
        }
      }
    }
    .message {
    }
  }

  .appraise {
    /deep/ .el-dialog__header {
      padding: 0 !important;
    }

    .demo-ruleForm {
      margin-top: 20px;

      .form-item {
        /deep/ .el-form-item__content {
          line-height: 20px;
        }
        /deep/ .el-form-item__label {
          line-height: 20px;
        }

        img {
          width: 100px;
          height: 70px;
          border: 1px solid;
          margin-bottom: 10px;
          margin-right: 10px;
        }
      }

      .form-attachment {
        margin-top: 30px;
        margin-bottom: -10px;
        display: flex;
        align-items: center;
        justify-content: center;

        /deep/ .el-form-item__content {
          margin-left: 0 !important;
        }

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 14px;
          border-radius: 5px;
          width: 120px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>